import React from 'react'
import { Form, Input, Button, Selector } from 'antd-mobile'
import { AuthRoute } from '../web/auth';
import { log, runCommand, useSetState } from '../web/util';

export const SmsPage: React.FC<{}> = ({ }) => {
  const options = [
    { label: '快手', value: `1` },
    { label: '快手极速版', value: `2` },
  ]
  const { data: state, setData: setState } = useSetState<any>({
    phone: `获取手机号码`,
    phoneCode: `获取手机验证码`,
    release: `释放手机号`,
    loading: false,
    interval: null
  })
  const { data, setData } = useSetState<{ phone: string, code: string }>({
    phone: ``,
    code: ``
  })
  const getPhone = () => {
    if (state.loading) return;
    log(`正在获取手机号`)
    setState({
      loading: true
    })
    let i = 0;
    let interval = setInterval(() => {
      i += 1;
      if (i >= 60) {
        setState({
          interval: null,
          loading: false,
          phone: `获取手机号码`
        })
        interval && clearInterval(interval)
        return;
      }
      setState({
        phone: `获取手机号码${i}s`
      });
    }, 1000);
    runCommand("COMMAND_GET_PHONE").then((res: string) => {
      setState({
        interval: null,
        loading: false,
        phone: `获取手机号码`
      })
      interval && clearInterval(interval)
      setData({
        phone: res
      })
    })
  }
  const getPhoneCode = () => {
    if (state.loading) return;
    if (!data.phone) return;
    log(`正在获取手机验证码`)
    setState({
      loading: true
    })
    let i = 0;
    let interval = setInterval(() => {
      i += 1;
      if (i >= 60) {
        setState({
          interval: null,
          loading: false,
          phoneCode: `获取手机验证码`
        })
        interval && clearInterval(interval)
        return;
      }
      setState({
        phoneCode: `获取手机验证码${i}s`
      });
    }, 1000);
    runCommand("COMMAND_GET_PHONE_CODE", data.phone).then((res: string) => {
      setState({
        interval: null,
        loading: false,
        phoneCode: `获取手机验证码`
      })
      interval && clearInterval(interval)
      setData({
        phone: res
      })
    })
  }
  const releasePhone = () => {
    if (state.loading) return;
  }
  return <AuthRoute>
    <div className='flex flex-col h-full px-24px mt-24px'>
      <Form layout='horizontal' footer={
        <Button block type='submit' disabled={!data.phone} onClick={e => {
          releasePhone()
        }} color='primary' size='large'>
          {state.release}
        </Button>
      }>
        <Form.Item label=''>
          <Selector
            options={options}
            defaultValue={['1']}
            onChange={(arr, extend) => console.log(arr, extend.items)}
          />
        </Form.Item>
        <Form.Item
          label=''
          extra={
            <div style={{
              borderLeft: `solid 1px #eeeeee`,
              paddingLeft: `12px`,
              fontSize: `17px`,
              lineHeight: `22px`,
            }}>
              <Button disabled={state.loading} fill={'none'} onClick={e => getPhone()}>{state.phone}</Button>
            </div>
          }
        >
          <Input value={data.phone} disabled placeholder='手机号码' clearable />
        </Form.Item>
        <Form.Item
          label=''
          extra={
            <div style={{
              borderLeft: `solid 1px #eeeeee`,
              paddingLeft: `12px`,
              fontSize: `17px`,
              lineHeight: `22px`,
            }}>
              <Button disabled={state.loading || !data.phone} fill={'none'} onClick={e => getPhoneCode()}>{state.phoneCode}</Button>
            </div>
          }
        >
          <Input value={data.code} disabled placeholder='验证码' clearable />
        </Form.Item>
      </Form>
    </div>
  </AuthRoute>
}
